<template>
  <div class="order-create">
    <div class="container">

      <createTop firstMenu="配料采购" secondMenu="采购退货" title="添加/编辑"></createTop>

      <el-card class="first">
        <el-select filterable  :style="{'margrinBottom':'15px'}" @change="choseDingdan" size="small" v-model="dingdan" placeholder="选择退货订单">
          <el-option v-for="item in dingdans" :key="item.purchaseInfoId" :label="item.order" :value="item.purchaseInfoId"></el-option>
        </el-select>
      </el-card>

      <el-card class="top-card" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <div class="left">配料清单</div>
        </div>
           <div class="order-create-table-wrap">
              <el-table
                :data="tableData"
                style="width: 100%"
                :fit="true"
                :stripe="true"
                size="mini"
                align="center">

                <el-table-column
                  prop="materials_number"
                  label="配料编号"
                  min-width="100"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="materials_name"
                  label="配料名称"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="formats_name"
                  label="规格/型号"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="materials_unit"
                  label="单位"
                  min-width="120"
                  align="center">
                </el-table-column>
                
                <el-table-column 
                prop="suppliers_nickname"
                label="供应商"
                min-width="110"
                align="center">
                </el-table-column>

                <el-table-column
                  prop="can_return_count"
                  label="剩余可退数"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column 
                label="退货数量"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.count" 
                    @blur="countChange(scope)"
                    placeholder="0"></el-input>
                  </template>
                </el-table-column>

                <el-table-column 
                label="退货单价"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.price" 
                    @blur="check(scope)"
                    placeholder="退货单价"></el-input>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="allPrice"
                  label="小计(元)"
                  min-width="120"
                  align="center">
                  <template slot-scope="scope">
                    <div>{{scope.row.allPrice?scope.row.allPrice.toFixed(3):''}}</div>
                  </template>
                </el-table-column>
                
                <el-table-column 
                label="备注"
                min-width="110"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.remark" 
                    placeholder="备注"></el-input>
                  </template>
                </el-table-column>

              </el-table>
              <div class="otherPrice">
                <el-checkbox :style="{'marginRight':'10px'}" 
                v-model="checked"
                @change="xieshangChange"></el-checkbox>
                通过协商,退款金额为 :  
                <el-input 
                size="mini"
                :style="{'width':'100px','marginLeft':'10px'}"
                v-model="otherPrice"
                :disabled="checked?false:true"
                @blur="xieshang"
                placeholder="0"></el-input>
              </div>

              <div class="otherPrice">
                应付金额 : {{allPrice.toFixed(3)}}
              </div>

            </div>
      </el-card>

      <el-card :style="{'margin-bottom':'20px'}" shadow="always" v-loading="loading">
        <div slot="header" class="card-title">
          <div class="left">退货信息</div>
        </div>
        <div class="content">
          <div class="se">
            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled v-model="username" placeholder="读取账号"></el-input>
          </div>
          <div class="se">
            <div class="content-title">退货单号</div>
            <el-input :style="{'width':'350px'}" disabled v-model="order" placeholder="自动填充"></el-input>
          </div>
        </div>

        <div class="content">
          <div class="se">
          <div class="content-title">退货日期 <span class="red-icon">※</span></div>
            <el-date-picker
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
            </el-date-picker>

            <div class="content-title">经办人</div>
            <el-input :style="{'width':'350px'}" v-model="doName" placeholder="输入经办人姓名"></el-input>
          </div>

          <div class="se">
            <div class="content-title">退货备注 </div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
      </el-card>

      <saveBtn @confirm="confirm"></saveBtn>

      <!-- <childTable v-show="showChild" @confirm="addTable" @close="clseChild"></childTable> -->

    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import ajaxResquest from '@/api/apiRequest';
// import tableList from '@/tables/produceInCreateTable.vue';
import childTable from '@/tables/supplier/supplierReturnCreateChild.vue';
import { Watch } from 'vue-property-decorator';
@Component({
  components: {
    createTop,
    saveBtn,
    // tableList,
    childTable
  }
})
export default class SupplierReturnCreate extends Vue {
  createRes!: ajaxResquest;
  infoRes!: ajaxResquest;
  currentInfo!: ajaxResquest;

  username: string = '';
  loading: boolean = false;
  info!: object;
  id!: string;
  date: string = '';
  leixing: string = '其他出库';
  doName: string = '';
  order: string = '';
  remark: string = '';
  tableData: any[] = [];

  inCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;

  showChild: boolean = false;

  customers: any[] = [];
  customer: string = '';
  te: string = '';
  otherPrice: any = '';
  allPrice: any = 0;
  fapiao: string = '';
  dingdans: any[] = [];
  dingdan: string = '';
  checked: boolean = false;

  // 客户信息
  customerInfo: any = {};
  // @Watch('otherPrice')
  mounted() {
    console.log(this.$route.query);
    this.infoRes = new ajaxResquest('/purchase/returnOrderAdd');
    this.createRes = new ajaxResquest('/purchase/returnPurchases');
    this.currentInfo = new ajaxResquest('/purchase/getReturnList');
    this.getInfo();
    if (this.$route.query.id) {
      this.dingdan = this.$route.query.id;
      this.choseDingdan();
    }
  }
  getInfo() {
    this.infoRes.getFunction().then((res: any) => {
      if (res.data.code === 1) {
        this.dingdans = res.data.data.types.order;
        console.log(res.data.data);
      }
    });
  }
  choseDingdan() {
    this.currentInfo
      .getFunction({ purchaseInfoId: this.dingdan })
      .then((res: any) => {
        if (res.data.code === 1) {
          console.log(res.data.data.types.info);
          let temp = res.data.data.types.info;
          this.tableData = temp;
        }
      });
  }

  del(index: number, val: any) {
    this.tableData.splice(index, 1);
  }
  countChange(row: any) {
    console.log(row.row);
    if (row.row.price) {
      let price: any;
      price = parseFloat(row.row.count) * parseFloat(row.row.price);
      this.$set(this.tableData[row.$index], 'allPrice', price);
      let temp: number = 0;
      this.tableData.map(i => {
        if (i.allPrice) {
          temp = temp + parseFloat(i.allPrice);
        }
      });
      if (this.checked) {
        return;
      }
      this.allPrice = temp;
    } else {
      this.$set(this.tableData[row.$index], 'allPrice', '');
    }
  }
  check(row: any) {
    if (row.row.count) {
      let val = parseFloat(row.row.count) * parseFloat(row.row.price);
      this.$set(this.tableData[row.$index], 'allPrice', val);
      let temp: number = 0;
      this.tableData.map(i => {
        if (i.allPrice) {
          temp = temp + parseFloat(i.allPrice);
        }
      });
      if (this.checked) {
        return;
      }
      this.allPrice = temp;
    }
  }
  xieshangChange(val: any) {
    console.log(val);
    if (!val) {
      let temp: number = 0;
      this.tableData.map(i => {
        if (i.allPrice) {
          temp = temp + parseFloat(i.allPrice);
        }
      });
      this.allPrice = temp;
    } else {
      if (this.otherPrice) {
        this.allPrice = parseFloat(this.otherPrice);
      }
    }
  }
  xieshang(val: any) {
    this.allPrice = parseFloat(this.otherPrice);
  }
  confirm(): void {
    let temp = this.tableData;
    // return;
    let zero = false;
    let sTemp: any = temp.map((i: any) => {
      if (!i.count || !i.price) {
        zero = true;
        this.$message.error('退货数量和价格不能为空');
      }
      return {
        materials_id: i.materials_id,
        format_id: i.format_id,
        number: i.count ? '-' + i.count : 0,
        suppliers_id: i.suppliers_id,
        remarks: i.remark ? i.remark : '',
        price: i.price
      };
    });
    if (zero) {
      return;
    }
    sTemp = JSON.stringify(sTemp);
    console.log(this.allPrice);

    let data: any = {
      purchaseInfoId: this.dingdan,
      returnInfo: sTemp,
      doName: this.doName,
      date: this.date,
      remarks: this.remark,
      allPrice: this.checked ? this.otherPrice : this.allPrice
      // 协商退款金额
    };
    if (this.checked) {
      data = { ...data, should_return_price: this.otherPrice };
    }
    this.createRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.$to('supplierReturn');
      }
    });
  }
  selectChange(val: any) {
    // console.log(val);
    let temp;
    this.customers.map((i: any) => {
      if (i.id === val) {
        this.customerInfo = i;
      }
    });
  }
}
</script>
<style lang="less">
.order-create {
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow: auto;
  .top-card {
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  .el-card {
    overflow-y: auto;
  }
  .content {
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 30px;
      margin-top: 5px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 10px;
    }
  }
  .card-title {
    position: relative;
    .right {
      position: absolute;
      right: 0px;
      top: -5px;
    }
  }
  .search {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 15px;
  }
  .info {
    text-align: left;
    .item {
      height: 30px;
    }
  }
  .otherPrice {
    margin-top: 10px;
    width: 100%;
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
  .fapiao {
    text-align: left;
    margin-top: 15px;
    .item {
      height: 30px;
    }
    .fapiao-select {
      height: 45px;
    }
  }
  .left {
    text-align: left;
    font-weight: 600;
  }
  .first {
    margin-bottom: 15px;
  }
}
</style>
